<template>
    <h1>这是一个vuex✌</h1>
    <p>count: {{count}}</p>
    <p>tenTimes: {{tenTimes}}</p>

    <h1>命名空间</h1>
    <p>无命名空间</p>
    <p>访问 模块A中的state数据：{{ $store.state.a.countA }}</p>
    <p>访问 模块A中的getters数据：{{ $store.getters.countAA }}</p>
    <p>有命名空间</p>
    <p>访问 模块B中的state数据：{{ $store.state.b.countB }}</p>
    <p>访问 模块B中的getters数据：{{ $store.getters['b/countBB'] }}</p>

    <h1>mapxxx方法</h1>
    <h2>全局</h2>
    <p>state</p>
    <p>count: {{count}}</p>
    <p>getters</p>
    <p>tenTimes: {{tenTimes}}</p>
    <p>countAA: {{ countAA }}</p>
    <p>mutations</p>
    <button @click="emitIncrementMut"> 触发incrementMut</button>
    <button @click="increaseA"> 触发increaseA</button>
    <p>Actions</p>
    <button @click="emitIncrementAct"> 触发incrementAct</button>
    <button @click="asyncIncreaseA"> 触发asyncIncreaseA</button>

    <h2>局部</h2>
    <p>moduleB state</p>
    <p>countB:{{ countB }}</p>
    
    <p>moduleB mutations</p>
    <button @click="emitIncreaseB">触发increaseB</button>
    
    <h2>重命名</h2>
    <p>countAlias:{{ countAlias }}</p>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
    export default {
        computed:{
            ...mapState(['count']),
            ...mapGetters(['tenTimes','countAA']),

            //映射局部
            ...mapState('b', ['countB']),

            //重命名
            ...mapState({
                countAlias:'count'
            })

            // count(){
            //     return this.$store.state.count
            // },
            // tenTimes(){
            //     return this.$store.getters.tenTimes
            // }
        },

        methods:{
            ...mapMutations(['incrementMut','increaseA']),
            emitIncrementMut(){
                this.incrementMut({count:40})
            },
            ...mapActions(['incrementAct','asyncIncreaseA']),
            emitIncrementAct(){
                this.incrementAct({count:400})                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ({count:400})
            },
            //映射局部
            ...mapMutations('b',['increaseB']),
            emitIncreaseB(){
                this.increaseB()
            },
        }
        
    }
</script>
<style scoped>

</style>
